<route lang="json5" type="page">
{
style: {
navigationBarTitleText: '加入班级',
},
}
</route>

<script setup lang="ts">
import { useNotify } from 'wot-design-uni'
import api from '@/api'
import { useClassStore } from '@/store'

const { showNotify } = useNotify()

const form = ref()

const classStore = useClassStore()

const model = reactive<{ classCode: string }>({
  classCode: '',
})

async function handleSubmit() {
  const { valid } = await form.value.validate()
  if (valid) {
    const { code, msg, data: classId } = await api.classes.joinClass(model.classCode)
    if (code === 0) {
      classStore.setRefresh(true)
      classStore.setInitialClassId(classId)
      await uni.navigateBack()
    }
    else {
      showNotify({
        type: 'danger',
        message: msg,
      })
    }
  }
}
</script>

<template>
  <view class="join-class-container">
    <wd-notify />
    <wd-card title="加入班级">
      <wd-form ref="form" :model="model">
        <wd-cell-group border>
          <wd-input
            v-model="model.classCode"
            label="班级口令"
            label-width="100px"
            prop="classCode"
            clearable
            placeholder="请输入班级口令……"
            :rules="[{ required: true, message: '请填写班级口令！' }]"
          />
        </wd-cell-group>
        <view class="footer">
          <wd-button type="primary" size="large" block @click="handleSubmit">
            提交
          </wd-button>
        </view>
      </wd-form>
    </wd-card>
  </view>
</template>

<style scoped lang="scss">
.join-class-container {
  min-height: 95vh;
  padding: 15px 0;
  background: linear-gradient(135deg, #e0f6ff 0%, #f0fff0 50%, #fff5ee 100%);
}

.footer {
  padding: 12px;
}
</style>
